<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-row>
          <el-col :span="20"
            ><div class="grid-content bg-purple">
              关键字 <el-input v-model="cdata.keyword" placeholder="根据文章标题搜索"></el-input> 状态
              <el-select v-model="cdata.state" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-button class="box" @click="clear">清除</el-button>
              <el-button type="primary" @click="find">搜索</el-button>
            </div></el-col
          >
          <el-col :span="4"
            ><div class="grid-content bg-purple-light">
              <el-button type="success" @click="adds"
                ><i class="el-icon-edit"></i>新增技巧</el-button
              >
            </div></el-col
          >
        </el-row>
        <el-alert :title="totals" type="info" show-icon> </el-alert>
        <el-table :data="tableData" style="width: 100%">

          <el-table-column type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column prop="title" label="文章标题" width="320" >
            <template slot-scope="scope">
              <span>{{scope.row.title}}</span>
              <a href="#" v-if="scope.row.videoURL" @click="pic(scope.row.videoURL)"><i class="el-icon-film" ></i></a>

            </template>
          </el-table-column>

          <el-table-column prop="visits" label="阅读数" width="200">
          </el-table-column>
          <el-table-column prop="username" label="录入人" width="200">
          </el-table-column>
          <el-table-column prop="createTime" label="录入时间" width="250">
             <template #default="{ row }">
              {{ formateTime(row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            width="180"
            :formatter="formatterFormOfEmpment"
          >
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >预览</el-button
              >
              <el-button type="text" size="small" @click="stopuse(scope.row)"
                >{{scope.row.state==1?'禁用':'启用'}}</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.state === 1"
                @click="fix(scope.row)"
                >修改</el-button
              >
              <el-button
                type="text"
                size="small"
                :disabled="scope.row.state === 1"
                @click="del(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @current-change="handleCurrentChange"
            :page-sizes="[10]"
            :page-size="10"
            layout=" prev, pager, next, sizes,  jumper"
            :total="total"
          >
          </el-pagination>
        </div>

        <el-dialog
          :title="form.id ? '编辑文章' : '添加文章'"
          :visible.sync="dialogVisible"
          width="50%"
          @close="close"
        >
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="文章标题" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>

            <el-form-item label="文章内容" prop="articleBody">
              <quill-editor
                v-model="form.articleBody"
                ref="myQuillEditor"
              ></quill-editor>
            </el-form-item>

            <el-form-item label="视频地址">
              <el-input v-model="form.videoURL"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addList">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <el-dialog
          title="预览文章"
          :visible.sync="dialogTableVisible"
          width="50%"
        >
          <h3>{{ arr.title }}</h3>
          <p>
            <span>{{ formateTime(arr.createTime) }}</span>
            <span>超级管理员</span>
            <span><i class="el-icon-view"></i>{{ arr.visits }}</span>
          </p>
          <p v-html="arr.articleBody"></p>
        </el-dialog>

         <!-- <el-dialog

         title='视频'
          :visible.sync="dialogvideoVisible"
          width="50%"

        >
        <video :src="video" controls pool></video>
        </el-dialog> -->
          <!-- 111a -->
      </el-card>
    </div>
    <articles-video :img="video" ref="videoRef"> </articles-video>
  </div>

</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import articlesVideo from '@/module-hmmm/components/articles-video.vue'
import dayjs from 'dayjs'
import {
  list,
  remove,
  changeState,
  add,
  detail,
  update
} from '@/api/hmmm/articles.js'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor,
    articlesVideo
  },
  created () {
    // 数据初显示
    this.getArticlesList()
  },
  data () {
    return {
      video: '',
      arr: {},
      dialogvideoVisible: false,
      dialogTableVisible: false,
      dialogVisible: false,
      cdata: {
        page: 1,
        pagesize: 10

      },
      total: 0,
      totals: '',

      options: [
        {
          value: 1,
          label: '已启用'
        },
        {
          value: 0,
          label: '已禁用'
        }
      ],
      tableData: [],

      form: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [
          {
            required: true,
            message: '请输入文章标题',
            trigger: ['blur', 'change']
          }
        ],
        articleBody: [
          {
            required: true,
            message: '请输入文章内容',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  methods: {
    // 获取初始数据信息
    async getArticlesList () {
      const { data } = await list(this.cdata)
      this.tableData = data.items
      // 显示总共多少条
      this.total = data.counts
      this.totals = `数据一共${data.counts}条`
      console.log(data)
    },
    // 通过01判断启用,禁用
    formatterFormOfEmpment (row, column, cellValue, index) {
      if (Number(cellValue) === 1) {
        return '已启用'
      } else {
        return '已禁用'
      }
    },
    // 点击预览函数
    async handleClick (m) {
      this.dialogTableVisible = true
      const data = await detail(m)
      this.arr = data.data
      console.log(this.arr)
    },
    // 点击禁用函数
    async stopuse (data) {
      data.state = 1 - data.state
      await changeState(data)

      // 数据初显示
      this.getArticlesList()
    },

    handleCurrentChange (val) {
      this.cdata.page = val
      // 数据初显示
      this.getArticlesList()
    },
    // 点击删除操作
    del (data) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          console.log(data)
          await remove(data)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })

          this.cdata.page = 1
          // 数据初显示
          this.getArticlesList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击新增操作
    adds () {
      this.dialogVisible = true
      console.log(this.form)
    },
    // 点击修改操作
    async fix (m) {
      this.dialogVisible = true
      const data = await detail(m)
      this.form = data.data
      console.log(this.form)
    },
    // 新添/修改数据操作
    addList () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.form.id) {
            this.$message({
              message: '恭喜你，修改成功',
              type: 'success'
            })
            // console.log(this.form)
            await update(this.form)
          } else {
            this.$message({
              message: '恭喜你，添加成功',
              type: 'success'
            })
            // console.log(this.form)
            await add(this.form)
          }

          this.dialogVisible = false
          // 数据初显示
          this.getArticlesList()
        } else {
          this.$message.error('校验未通过!')
          return false
        }
      })
    },
    // 弹框关闭后进行的操作
    close () {
      this.$refs.form.resetFields()
      this.form = {
        title: '',
        videoURL: '',
        articleBody: ''
      }
    },
    // 搜索对应信息数据
    find () {
      console.log(this.cdata)
      // 数据初显示
      this.getArticlesList()
    },
    // 清空还原数据
    clear () {
      this.cdata = {
        page: 1,
        pagesize: 10

      }
      // 数据初显示
      this.getArticlesList()
    },
    /**
     * 转换时间
     */
    formateTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    pic (src) {
      // this.dialogvideoVisible = true
      this.video = src
      this.$refs.videoRef.show()
    }
  }

}
</script>

<style scoped>
.bg-purple .el-input {
  display: inline-block;
  width: 200px;
}
.box {
  margin-left: 10px;
}
.bg-purple-light {
  float: right;
}
.el-alert {
  margin-top: 12px;
  margin-bottom: 12px;
}
.block {
  margin-top: 8px;
  float: right;
}
.el-icon-film{
  color: blue;
  margin-left: 5px;
}

</style>
